<template>
  <div>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
      class="demo-ruleForm" :size="formSize" status-icon>
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="启用" prop="state">
        <el-switch v-model="ruleForm.state" :active-value="1" :inactive-value="0" />
      </el-form-item>

      <el-form-item label="角色备注" prop="description">
        <el-input v-model="ruleForm.description" style="width: 240px" :rows="2" type="textarea" />
      </el-form-item>
      <el-form-item style="display: flex; flex-direction: column">
        <el-button @click="offalert"> 取消 </el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { FormInstance } from "element-plus";
const ruleFormRef = ref<FormInstance>();
defineProps([
  "ruleForm",
  "rules",
  "formSize",
  "submitForm",
  "offalert",
  "uploads",
]);
const value1 = ref(true);
</script>

<style scoped></style>
